<template>
  <div class="home">
    <!-- 轮播图 -->
    <swiper :options="swiperOption">
      <swiperslide v-for="item in model.items" :key="item.id">
        <a :href="item.url">
          <!-- <img class="w-100" src="../assets/images/67d519d72697d6f7c636349979eb05dc.jpeg" alt /> -->
          <img :src="item.image" class="w-100" alt />
        </a>
      </swiperslide>
     
      <div class="swiper-pagination pagination-home" slot="pagination"></div>
    </swiper>
    <!-- 导航栏 -->
    <div class="nav-icons bg-white mt-3 text-center text-grey pt-3">
      <div class="d-flex flex-wrap">
        <div class="nav-item mb-3" style="width:25%" v-for="(item,i) in 13" :key="i">
          <i class="sprite sprite-news"></i>
          <div class="py-2">爆料站</div>
        </div>
      </div>
      <div class="bg-light py-2">
        <i class="sprite sprite-shouqi mr-1"></i>
        <span>收起</span>
      </div>
    </div>
    <!-- 导航结束 -->
    <!-- 新闻资讯 -->
    <m-list-card title="新闻列表" icon="menu" :categories="newsCats">
      <template #item="{category}">
        <router-link tag="div"  :to="`/acticle/${item._id}`"
          v-for="(item,i) in category.newsList"
          :key="i"
          class="py-2 fs-lg fw-2 pt-2 d-flex ai-center"
        >
          <span>{{item.categoryName}}</span>
          <span class="px-2">|</span>
          <span class="flex-1 text-elipse pr-2">{{item.title}}</span>
          <span>{{item.createdAt | date}}</span>
        </router-link>
      </template>
    </m-list-card>
    <!-- 英雄列表 -->
    <m-list-card title="英雄列表" icon="menu" :categories="heroesCats">
      <template #item="{category}">
        <div class="d-flex flex-wrap" style="margin:0 -0.5rem">
          <router-link tag="div" :to="`/hero/${item._id}`" v-for="(item,i) in category.heroList" :key="i" class="p-2 text-center" style="width:20%;">
            <img :src="item.avater" class="w-100" alt />
            <div class="fw-2">{{item.name}}</div>
          </router-link>
        </div>
      </template>
    </m-list-card>

    <m-list-card title="精彩视频" icon:="menu" :categories="[]"></m-list-card>

  </div>
</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import dayjs from "dayjs";
export default {
  filters: {
    date(val) {
      return dayjs(val).format("MM/DD");
    }
  },
  data() {
    return {
      models: [],
      swiperOption: {
        pagination: {
          el: ".pagination-home"
        },
        autoplay: {
          delay: 3000,
          waitForTransition: true,
          disableOnInteraction: true
        },
        speed: 400
      },
      model: [],
      newsCats: [],
      heroesCats: [],
    };
  },
  components: {
    swiper: swiper,
    swiperslide: swiperSlide
  },
  methods: {
    async fetchNewsCats() {
      const res = await this.$http.get("web/api/news/list");
      this.newsCats = res.data;
    },
    async fetchHeroesCats() {
      const res = await this.$http.get("web/api/heroes/list");
      this.heroesCats = res.data;
      console.log(this.heroesCats);
    },
    async fetch() {
      const res = await this.$http.get("web/api/ads");
      this.model = res.data[0];
      console.log(res)
    },
  }, 
  created() {
    this.fetch();
    this.fetchNewsCats();
    this.fetchHeroesCats();
  } 
};
</script>



<style lang="scss" scoped>
.nav-icons {
  border-bottom: 1px solid #d4d9de;
  border-top: 1px solid #d4d9de;
  .nav-item {
    height: 4rem;
    line-height: 2rem;
    border-right: 1px solid #d4d9de;
    &:nth-child(4n) {
      border-right: none;
    }
  }
}
</style>
